<template>
    <div class="fixed_button--layout">
        <div class="main_container">
          <slot name="content"></slot>
        </div>
        <div class="button__container">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang='ts'>
</script>
<style scoped lang='scss'>
.fixed_button--layout {
    padding-bottom: 60px;
    /* 可以是任何有效的 transform 值 */
    .button__container {
        position: fixed;
        bottom: 0;
        left: 70px;
        width: calc(100% - 70px);
        background: rgba(255, 255, 255, 0.2);
        /* 半透明背景 */
        backdrop-filter: blur(10px);
        /* 背景模糊 */
        -webkit-backdrop-filter: blur(10px);
        /* 兼容性前缀 */
        border-top: 1px solid #E7E7E7;
        /* 可选边框 */
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        gap: 1rem;

        .processing__text {
            color: #4090EF;
            font-size: 1rem;
            font-weight: bold;
            margin: 0 6px;
        }
    }
}
</style>